import React, {useRef, useState} from 'react';
import {Text, StyleSheet, View, Switch, Button} from 'react-native';
import Camera from '../../../RTNCameraKit/src/Camera';

import {TestCase, Tester, TestSuite} from '@rnoh/testerino';
import {
  CameraApi,
  CameraType,
  OnError,
  OnZoom,
} from '../../../RTNCameraKit/types';

export const CameraKitTest: React.FC = (): JSX.Element => {
  const nativeRef = useRef<CameraApi>(null);
  const [zoom, setZoom] = useState<number>(0);
  const [errorStr, setErrorStr] = useState<string>('');

  const [scanBarcode, setScanBarcode] = useState<boolean>(false);

  const onError = (e: OnError) => {
    setErrorStr(e.nativeEvent.errorMessage);
  };

  const onZoom = (e: OnZoom) => {
    setZoom(e.nativeEvent.zoom);
  };

  const toggleSwitch = () => {
    setScanBarcode((cur: boolean) => !cur);
  };

  return (
    <Tester>
      <TestSuite name="cameraKit">
        <TestCase itShould="demo1">
          <View>
            <Camera
              style={{width: '100%', height: 500}}
              ref={nativeRef}
              maxZoom={10}
              cameraType={CameraType.Back}
              flashMode={0}
              onError={onError}
              onZoom={onZoom}
              resetFocusTimeout={3000}
              scanThrottleDelay={3000}
              scanBarcode={scanBarcode}
            />
          </View>
          <View>
            <Button
              title="拍照"
              onPress={() => {
                nativeRef.current?.capture();
              }}
            />
            <Text style={styles.text}>zoom:{zoom}</Text>
            <Text style={styles.text}>error:{errorStr}</Text>
          </View>
        </TestCase>
      </TestSuite>
    </Tester>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    textAlign: 'center',
    color: '#000',
    marginTop: 10,
  },
});
